<script setup>
import { ref } from "vue";
defineProps({
    msg: {
        type: String,
        required: true,
    },
    data: {
        type: Array,
        required: false,
        default() {
            return [];
        },
    },
});

const count = ref(0);
</script>

<template>
    <div
        class="w-full h-auto mobile:h-full self-center bg-no-repeat wen-mobile-down mobile:pt-[80px] mobile:px-6 overflow-y-auto"
    >
        <div class="flex mb-[70px] mobile:mb-12">
            <span class="wen-index-title">应用领域</span>
        </div>
        <div class="flex">
            <div
                class="w-full flex mobile:block overflow-hidden bg-white wow animate__animated animate__pushOnRight timing"
            >
                <div
                    class="wen-card w-1/5 mobile:w-1/2 mobile:inline-block relative hover:text-white border-[0.5px] border-undercolor2 border-inside"
                    v-for="(item, index) in data"
                    :class="{ 'mobile:w-full': index == 4 }"
                >
                    <div
                        class="w-full h-full absolute left-0 top-0 Mask overflow-hidden pointer-events-none wen-card-hidden"
                    >
                        <img class="w-full mb-6" src="../assets/p1.png" />
                    </div>
                    <div
                        class="w-full py-[147px] px-[48px] mobile:py-8 mobile:px-4 z-[1] relative text-center mobile:text-left"
                    >
                        <h3
                            class="text-4xl mb-6 font-medium mobile:text-2xl mobile:mb-4 mobile:text-center"
                        >
                            <a :href="data.url">{{ item.cn_title }}</a>
                        </h3>
                        <p
                            class="text-xl w-full text-gray3 text-left line-clamp-[7] mobile:text-sm"
                        >
                            <a :href="item.url" v-html="item.descri"></a>
                        </p>
                        <div
                            class="mt-6 mobile:mt-5 leading-10 flex items-center"
                        >
                            <span
                                class="text-lg font-medium mobile:text-sm mobile:leading-[20px]"
                                >查看详情</span
                            >
                            <div
                                class="wen-ico inline-block ml-1 w-5 h-5 mobile:w-3 mobile:h-3 leading-[20px]"
                            >
                                <img
                                    class="wen-ico-item"
                                    src="/src/assets/fa_angle_right.svg"
                                    alt=""
                                />
                                <img
                                    class="wen-ico-item"
                                    src="/src/assets/fa_angle_right_black.svg"
                                    alt=""
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped></style>
